<template>
    <div style="width:390px;height:100vh;background-color:#f7f7f7;">
      <div v-if="detailData">
      <div style="width:390px;height:270px;position:relative">
        <img @click="goThree()" :src="detailData.img" style="width:390px;height:270px;">
        <div style="position:absolute;top:10px;display:flex;width:360px;margin-left:15px;">
          <p><el-icon size="25" color="white" @click="onClickLeft"><ArrowLeft/></el-icon></p>
          <P style="margin-left:280px;"><van-icon @click="gomessage()" name="chat-o" dot color="white" size="20"/></P>
          <P style="margin-left:10px;"><el-icon color="white" size="20"><Share /></el-icon></P>
        </div>
      </div>
      <div style="width:390px;background-color:white">
      <div style="width:360px;height:330px;margin-left:15px;background-color:white;margin-bottom:10px;">
        <p style="font-size: 18px;font-weight:700">{{ detailData.zu==0?'整租':detailData.zu==1?'合租':detailData.zu==2?'公寓':detailData.zu==3?'短租':'' }} | 实图真价 {{ detailData.zhi }} 房东好说话</p>
        <p><span style="color:#f57c00;font-weight:700;font-size:25px;" >{{ detailData.price }}</span><span style="color:#f57c00;font-size:12px;margin-left:5px;">元/月 </span><span style="font-size:12px;margin-left:15px;color:gray;">押二付一</span>
          <span style="margin-left:150px; cursor: pointer;" @click="toggleBookingBoxr">
                            <el-icon size="16" v-if="!isBookingBoxVisibler"><Star /></el-icon>
                            <el-icon size="16" v-if="isBookingBoxVisibler"><StarFilled /></el-icon>
                        </span>
         
          <span style="margin-left:5px;font-size:12px;color:gray;">收藏</span>
        </p>
        <div style="display:flex;justify-content:space-between;">
          <div>
            <h4>2室1厅1卫</h4>
            <p style="font-size:12px;text-align:center;color:gray;">房型</p>
          </div>
          <div>
            <h4>58.00m^</h4>
            <p style="font-size:12px;text-align:center;color:gray;">面积</p>
          </div>
          <div>
            <h4>中/34层</h4>
            <p style="font-size:12px;text-align:center;color:gray;">楼层</p>
          </div>
          <div>
            <h4>南</h4>
            <p style="font-size:12px;text-align:center;color:gray;">朝向</p>
          </div>
        </div>
        <div>
          <div style="margin-top:20px;" @click="router.push('/zhou')">
            <div style="display:flex;margin-bottom:8px;">
              <div style="width:45px;height:15px;font-size:10px;color:#4c5fa1;border:1px solid #e9ebf2;text-align:center;">邻地铁 ></div>
              <div style="width:55px;margin-left:10px;height:15px;font-size:10px;color:#4c5fa1;border:1px solid #e9ebf2;text-align:center;">配套齐全 ></div>
              <div style="width:45px;margin-left:10px;height:15px;font-size:10px;color:#4c5fa1;border:1px solid #e9ebf2;text-align:center;">精装修 ></div>
            </div>
            <div style="display:flex;margin-bottom:8px;">
              <div style="width:45px;height:15px;font-size:10px;color:#4c5fa1;border:1px solid #e9ebf2;text-align:center;">有阳台 ></div>
              <div style="width:55px;margin-left:10px;height:15px;font-size:10px;color:#4c5fa1;border:1px solid #e9ebf2;text-align:center;">首次出租 ></div>
              <div style="width:55px;margin-left:10px;height:15px;font-size:10px;color:#4c5fa1;border:1px solid #e9ebf2;text-align:center;">随时看房 ></div>
            </div>
            <div style="display:flex;margin-bottom:20px;">
              <div style="width:45px;height:15px;font-size:10px;color:#4c5fa1;border:1px solid #e9ebf2;text-align:center;">有电梯 ></div>
              <div style="width:55px;margin-left:10px;height:15px;font-size:10px;color:#4c5fa1;border:1px solid #e9ebf2;text-align:center;">普通住宅 ></div>
            </div>
            <p style="font-size:11px;color:gray;">1天前更新房源信息</p>
          </div>
        </div>
      </div>
    </div>
  </div>
    <div style="width:390px;background-color:white">
      <div style="width:360px;margin-left:15px;height:100px;background-color:white;margin-bottom:10px;">
        <h3 style="padding-top:20px;margin-bottom:20px;">看房必读</h3>
        <p style="font-size:12px;">看房时间：<span style="font-weight:700;font-size:12px;">随时看房</span>
          <span style="margin-left:182px;" @click="toggleBookingBoxs">预约看房 ></span>
        </p>
        <div v-if="isBookingBoxVisibles" style="position: absolute; top: 640px; right: 0; background-color: white; border: 1px solid #ccc; padding: 10px;">
                        <el-button style="margin-right: 10px" @click="router.push('/yuyue')">未预约</el-button>
                        <el-button @click="router.push('/yiyue')">已预约</el-button>
                    </div>
      </div>
    </div>
    <div style="width:390px;background-color:white">
      <div style="width:360px;background-color:white;margin-left:15px">
        <h3 style="padding-top:20px;margin-bottom:20px;">房屋介绍</h3> 
        <img src="../../assets/jie.png" style="width:355px;height:360px;margin-bottom:15px;">
        <img src="../../assets/she.png" style="width:355px;height:155px;">
      </div>
    </div>
    <div style="width:390px;background-color:white">
      <div style="width:360px;margin-left:15px;">
        <h3>地图位置</h3>
        <p>
          <el-icon><LocationFilled /></el-icon>
          <span style="font-size: 14px;">位于福田 福岗园大厦 距最近地铁站步行6分...</span>
          <span style="margin-left:40px;">></span>
        </p>
        <img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%95%B4%E7%A7%9F%E8%AF%A6%E6%83%85%E9%A1%B5/u512.svg" >
      </div>
      </div>
      <div style="width:390px;background-color:white">
      <div style="width:360px;height:130px;margin-left:15px;display:flex;margin-top:20px;">
            <div style="margin-top:5px"><img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%88%BF%E4%B8%9C%E4%BF%A1%E6%81%AF/u711.svg"></div>
            <div>
                <p style="font-size:16px;font-weight:700;margin-left:15px;">李小红女士
                  
                </p>
                <div style="display:flex;margin-top:-10px;">
                  <div style="width:60px;height:18px;margin-left:10px;color:white;text-align:center;font-size:12px;background-color: #4c5fa1;">业主本人</div>
                  <div style="width:40px;height:18px;margin-left:10px;color:#4c5fa1;text-align:center;font-size:12px;border:1px solid #4c5fa1">已实名</div>

                </div>
                
            </div>
            <div>
                <p style="font-size:12px;color:gray;margin-top:30px;margin-left:125px;" @click="router.push('/fangd')">详情 ></p>
            </div>
            
        </div>
      </div>
      <div style="width:390px;background-color:white">
        <div style="width:360px;height:40px;background-color:white;margin-left:15px;position:fixed;bottom:0;display: flex;">
          <div @click="toggleBookingBox">
                    <el-icon size="20" style="margin-left:10px;" ><Clock  /></el-icon>
                    <p style="font-size:10px;margin-top:-2px;text-align: center;">预约看房</p>
                    <div v-if="isBookingBoxVisible" style="position: absolute; bottom: 40px; left: 0; background-color: white; border: 1px solid #ccc; padding: 10px;">
                        <el-button style="margin-right: 10px"  @click="router.push('/yuyue')">未预约</el-button>
                        <el-button  @click="router.push('/yiyue')">已预约</el-button>
                    </div>
                </div>
            <el-button @click="gotalking()" type="primary" style="margin-left:23px;background-color:#f57c00;border:1px solid #f57c00;width:135px">微聊</el-button>
            <el-button type="primary" style="background-color:#e23940;border:1px solid #e23940;width:135px;margin-left:10px">电话</el-button>
        </div>
      </div>
    </div>
</template>
  
  <script setup lang="ts">
import {ref,computed,onMounted} from 'vue'
import axios from 'axios'
import { Search } from '@element-plus/icons-vue'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
const router=useRouter()
const detailData = ref(null);
const isBookingBoxVisible = ref(false);
const isBookingBoxVisibles = ref(false);
const isBookingBoxVisibler = ref(false);
const onClickLeft = () => history.back()
onMounted(()=>{
  const data= localStorage.getItem('detailData')
  if(data){
    detailData.value=JSON.parse(data)
    // localStorage.removeItem('detailData')
  }
})
let gomessage = () => {
  router.push('/taber/message')
}
let gotalking = () => {
  router.push('/talking')
}
const toggleBookingBox = () => {
    isBookingBoxVisible.value = !isBookingBoxVisible.value;
};
const toggleBookingBoxs = () => {
    isBookingBoxVisibles.value = !isBookingBoxVisibles.value;
};
const toggleBookingBoxr = () => {
    isBookingBoxVisibler.value = !isBookingBoxVisibler.value;
};
const goThree = () => {
  router.push('/three')
}
  </script>
  
  <style>
  
  </style>